var imgWidth = null;
var maxWidth = 1184;
var bannerIndex = 1;
var dailyIndex = 0;
var sortIndex = 0;
var imgNum = 6;
var flag = true;
var timer = null;
var todayWeek = 3;


// 初始化
function init() {
    showBanner(banner);
    interval();
    showWhiting(pagination(6, 1, whiting));
    showLike(like);
    showPop(pop);
    showDaily(daily,3);
    showSort(sort,"恋爱");
    showHottest(hottest);
    showRank(ranking,"飙升榜");
    showRecommend(recommend);
    $(".whiting a").eq(1).attr("href","./topic.html");
}


// 轮播图
function showBanner(arr) {
    var leftStr = "";
    var contentStr = "";
    var rightStr = "";
    for (var i = 0; i < imgNum + 2; i++) {
        leftStr += `<a class="bannerImg" href="javascript:void(0);"><img src="${arr[order[0][i]].url}"></a>`;
        contentStr += `<a class="bannerImg" href="javascript:void(0);"><img src="${arr[order[1][i]].url}"></a>`;
        rightStr += `<a class="bannerImg" href="javascript:void(0);"><img src="${arr[order[2][i]].url}"></a>`
    }
    $(".banner .bannerLeft .bannerList").html(leftStr);
    $(".banner .bannerContent .bannerList").html(contentStr);
    $(".banner .bannerRight .bannerList").html(rightStr);
    imgWidth = $(".banner img").width();
    $(".banner .bannerList").css("transform", "translateX( " + -imgWidth + "px )");
}

function interval() {
    clearInterval(timer);
    timer = setInterval(function () {
        bannerIndex++;
        $(".banner .bannerList").css({
            "transform": "translateX( " + -bannerIndex * imgWidth + "px )",
            "transition": "all 0.5s"
        });
    }, 3000);
}


$(".banner .prev").on("click", function () {
    if (flag) {
        flag = false;
        bannerIndex--;
        $(".banner .bannerList").css({
            "transform": "translateX( " + -bannerIndex * imgWidth + "px )",
            "transition": "all 0.5s"
        });
    };
});

$(".banner .next").on("click", function () {
    if (flag) {
        flag = false;
        bannerIndex++;
        $(".banner .bannerList").css({
            "transform": "translateX( " + -bannerIndex * imgWidth + "px )",
            "transition": "all 0.5s"
        });
    };
})

$(".banner .bannerList").on("transitionend", function () {
    if (bannerIndex >= imgNum + 1) {
        bannerIndex = 1;

        $(".banner .bannerList").css({
            "transform": "translateX( " + -bannerIndex * imgWidth + "px )",
            "transition": "none"
        });
    } else if (bannerIndex <= 0) {
        bannerIndex = imgNum;

        $(".banner .bannerList").css({
            "transform": "translateX( " + -bannerIndex * imgWidth + "px )",
            "transition": "none"
        });
    }
    flag = true;
});

$(".banner .bannerBox").hover(function () {
    clearInterval(timer);
}, function () {
    interval();
});


// 原创投稿
function pagination(pageSize, currentPage, arr) {
    var skipNum = (currentPage - 1) * pageSize;
    var newArr = (skipNum + pageSize >= arr.length) ? arr.slice(skipNum, arr.length) : arr.slice(skipNum, skipNum + pageSize);
    return newArr;
}

function showWhiting(arr){
    var whitingStr = "";
    for(var i = 0; i < arr.length; i++){
        if(arr[i].type === 0){
            whitingStr += ` 
            <li class="item">
                <a href="javascript:void(0);" title="${arr[i].title}">
                    <div class="imgBox">
                        <img src="${arr[i].url}">
                        <div class="info">
                            <span class="author">${arr[i].author}</span>
                            <span class="like"><svg width="11px" height="12px" viewBox="0 0 11 12" version="1.1" rel="nofollow" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" class="icon"><desc>Created with Sketch.</desc> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g id="tag" stroke="#ffffff" transform="translate(-503.000000, -559.000000)"><g id="Group-Copy-5" transform="translate(504.000000, 560.000000)"><path id="Stroke-1" d="M5.95913517,2.75540789 C5.8983025,2.93455129 6.03764219,3.11990058 6.22589463,3.11990058 L7.92468796,3.11948686 C8.78703212,3.11948686 9.36781967,3.82944084 9.21573801,4.69743819 L8.63495045,8.01345284 C8.48286878,8.88103647 7.65340715,9.59099045 6.79106299,9.59099045 L1.11800577,9.59099045 C0.503102597,9.59099045 0,9.08458971 0,8.46565547 L0,4.24482184 C0,3.6258876 0.503102597,3.11948686 1.11800577,3.11948686 L2.59443104,3.11948686 C2.7555554,3.11948686 2.91010325,3.06487501 3.037112,2.9647533 C3.33469883,2.7301706 3.7983424,2.19522276 3.80204168,1.13815258 C3.80450787,0.534939937 4.26650731,0.0343313614 4.86496923,0.00288817814 L4.89168628,0.00164699985 C5.54933673,-0.0326922661 6.09847486,0.474122201 6.13464563,1.13029179 C6.16711712,1.71695539 6.09765279,2.34912887 5.95913517,2.75540789 L5.95913517,2.75540789 Z"></path> <path id="Stroke-3" d="M2,3.5 L2,8.5"></path></g></g></g></svg>
                            ${arr[i].like}</span>
                        </div>
                    </div>
                    <p>${arr[i].title}</p>
                </a>
            </li>`;
        } else {
            var spanStr = "";
            for(var j = 0; j <arr[i].tab.length;j++){
                spanStr += `<span>${arr[i].tab[j]}</span>`
            }
            whitingStr += ` 
            <li class="item">
                <a href="javascript:void(0);" title="${arr[i].title}">
                    <div class="imgBox">
                        <img src="${arr[i].url}">
                        <div class="tab">${spanStr}</div>
                    </div>
                    <p>${arr[i].title}</p>
                </a>
            </li>`;
        }
    }
    $(".whiting .content").html(whitingStr);
}

$(".whiting .nav").on("click","span",function(){
    $(this).addClass("active").siblings("span").removeClass("active");
    showWhiting(pagination(6, $(this).index(), whiting));
    
    if($(this).index() == 1){
        $(".whiting a").eq(1).attr("href","./topic.html");
    }
})

// 这漫画令我上头！ /  国漫榜
function showLike(arr){
    var likeStr = "";
    for(var i = 0; i < arr.length; i++){
        likeStr += `
            <div class="card">
                <a href="javascript:void(0);">
                    <div class="imgBox">
                        <img src="${arr[i].url}">
                        <div class="tab">
                            <span>${arr[i].tab[0]}</span>
                            <span>${arr[i].tab[1]}</span>
                        </div>
                    </div>
                    <p>${arr[i].title}</p>
                </a>
                <div class="info">
                    <span>${arr[i].author}</span>
                    <span><svg width="11px" height="12px" viewBox="0 0 11 12" version="1.1" rel="nofollow" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" class="icon"><desc>Created with Sketch.</desc> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g id="tag" stroke="#999999" transform="translate(-503.000000, -559.000000)"><g id="Group-Copy-5" transform="translate(504.000000, 560.000000)"><path id="Stroke-1" d="M5.95913517,2.75540789 C5.8983025,2.93455129 6.03764219,3.11990058 6.22589463,3.11990058 L7.92468796,3.11948686 C8.78703212,3.11948686 9.36781967,3.82944084 9.21573801,4.69743819 L8.63495045,8.01345284 C8.48286878,8.88103647 7.65340715,9.59099045 6.79106299,9.59099045 L1.11800577,9.59099045 C0.503102597,9.59099045 0,9.08458971 0,8.46565547 L0,4.24482184 C0,3.6258876 0.503102597,3.11948686 1.11800577,3.11948686 L2.59443104,3.11948686 C2.7555554,3.11948686 2.91010325,3.06487501 3.037112,2.9647533 C3.33469883,2.7301706 3.7983424,2.19522276 3.80204168,1.13815258 C3.80450787,0.534939937 4.26650731,0.0343313614 4.86496923,0.00288817814 L4.89168628,0.00164699985 C5.54933673,-0.0326922661 6.09847486,0.474122201 6.13464563,1.13029179 C6.16711712,1.71695539 6.09765279,2.34912887 5.95913517,2.75540789 L5.95913517,2.75540789 Z"></path> <path id="Stroke-3" d="M2,3.5 L2,8.5"></path></g></g></g></svg>
                    ${arr[i].like}</span>
                </div>
            </div>`;
    }
    $(".like .likeList").html(likeStr);
}

function showPop(arr){
    var popStr="";
    for(var i = 0; i < arr.length; i++){
        var spanStr = "";
        for(var j = 0; j <arr[i].tab.length;j++){
            spanStr += `<span>${arr[i].tab[j]}</span>`
        }
        popStr += `
        <li>
            <div class="popCard">
                <div class="popImgBox">
                    <a href="javascript:void(0)">
                        <img src="${arr[i].url}">
                        <span class="ranking">${i + 1}</span>
                    </a>
                </div>
                <div class="content">
                    <a href="javascript:void(0)" class="title">${arr[i].title}</a>
                    <div class="label">${spanStr}</div>
                    <p class="depict" title="${arr[i].more}">${arr[i].depict}</p>
                    <a href="javascript:void(0)" class="updata"><span>更新至：</span><span class="chapter">${arr[i].updata}</span></a>
                </div>
            </div>
            <div class="popText">
                <div class="popSort">
                    <span class="f-left">${i + 1}</span>
                    <p class="f-left">${arr[i].title}</p>
                </div>
                <div class="updata">
                    <span class="f-left">更新至</span>
                    <span class="chapter f-left">${arr[i].updata}</span>
                </div>
            </div>
        </li>`;
    }
    $(".popularity .popList").html(popStr);
}

$(".popularity .popList").on("mouseenter","li",function(){
    if($(this).index() != 0){
        $(".popText").eq(0).css("display","flex");
    }
    $(".popCard").hide();
    $(this).children(".popText").hide();
    $(this).children(".popCard").css("display","flex");
})

$(".popularity .popList").on("mouseleave","li",function(){
    $(".popCard").hide();
    $(this).children(".popText").show();
});

$(".popularity .popList").on("mouseleave",function(){
    showPop(pop);
});

// 每日更新
function showDailyStr(arr){
    var dailyStr = "";
    for(var i = 0; i < arr.length; i++){
        dailyStr += `
                <div class="item">
                    <a href="javascript:void(0);" title="${arr[i].title}">
                        <div class="imgBox">
                            <img src="${arr[i].url}">
                            <div class="imgText">
                                <span class="author">${arr[i].author}</span>
                                <span class="like"><svg width="11px" height="12px" viewBox="0 0 11 12" version="1.1" rel="nofollow" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" class="icon"><desc>Created with Sketch.</desc> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g id="tag" stroke="#ffffff" transform="translate(-503.000000, -559.000000)"><g id="Group-Copy-5" transform="translate(504.000000, 560.000000)"><path id="Stroke-1" d="M5.95913517,2.75540789 C5.8983025,2.93455129 6.03764219,3.11990058 6.22589463,3.11990058 L7.92468796,3.11948686 C8.78703212,3.11948686 9.36781967,3.82944084 9.21573801,4.69743819 L8.63495045,8.01345284 C8.48286878,8.88103647 7.65340715,9.59099045 6.79106299,9.59099045 L1.11800577,9.59099045 C0.503102597,9.59099045 0,9.08458971 0,8.46565547 L0,4.24482184 C0,3.6258876 0.503102597,3.11948686 1.11800577,3.11948686 L2.59443104,3.11948686 C2.7555554,3.11948686 2.91010325,3.06487501 3.037112,2.9647533 C3.33469883,2.7301706 3.7983424,2.19522276 3.80204168,1.13815258 C3.80450787,0.534939937 4.26650731,0.0343313614 4.86496923,0.00288817814 L4.89168628,0.00164699985 C5.54933673,-0.0326922661 6.09847486,0.474122201 6.13464563,1.13029179 C6.16711712,1.71695539 6.09765279,2.34912887 5.95913517,2.75540789 L5.95913517,2.75540789 Z"></path> <path id="Stroke-3" d="M2,3.5 L2,8.5"></path></g></g></g></svg>
                                    ${arr[i].like}</span>
                            </div>
                        </div>
                        <div class="info">
                            <span class="title">${arr[i].title}</span>
                            <span class="tab">${arr[i].tab}</span>
                        </div>
                    </a>
                </div>`;
    }
    return dailyStr
}

function showDaily(arr,date){
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        if(arr[i].week == date){
            newArr.push(arr[i]);
        }
    }
    $(".dailyBox .page").eq(0).html(showDailyStr(pagination(10, 1, newArr)));
    $(".dailyBox .page").eq(1).html(showDailyStr(pagination(10, 2, newArr)));
    $(".dailyBox .page").eq(2).html(showDailyStr(pagination(10, 3, newArr)));
}

$(".daily .next").click(function(){
    if(flag){
        flag = false;
        dailyIndex++;
        $(".daily .dailyBox").css("transform","translateX( " + -maxWidth * dailyIndex + "px )");
        if(dailyIndex == 2){
            $(this).removeClass("btn");
        }
        if(dailyIndex != 0){
            $(".daily .prve").addClass("btn");
        }
    }
});

$(".daily .prve").click(function(){
    if(flag){
        flag = false;
        dailyIndex--;
        $(".daily .dailyBox").css("transform","translateX( " + -maxWidth * dailyIndex + "px )");
        if(dailyIndex == 0){
            $(this).removeClass("btn");
        }
        if(dailyIndex != 2){
            $(".daily .next").addClass("btn");
        }
    }
});

$(".daily .dailyBox").on("transitionend", function () {
    flag = true;
});


$(".daily .week").on("click","li", function(){
    $(this).addClass("active").siblings("li").removeClass("active");
    var day = "";
    if(todayWeek - $(this).index() <= 0){
        // day = todayWeek - $(this).index() + 7;
        // 正确语句↑↑↑ 
        // 测试用↓↓↓
        day = todayWeek;
        // 测试用↑↑↑ 
    }else{
        day = todayWeek - $(this).index();
    }
    showDaily(daily,day);
    $(".daily .dailyBox").css("transform","translateX( 0px )");
    dailyIndex = 0;
    $(".daily .prve").removeClass("btn");
    $(".daily .next").addClass("btn");
})

// 分类
function showSortStr(arr){
    var sortStr = "";
    for(var i = 0; i < arr.length; i++){
        sortStr += `
            <div class="item">
                <a href="javascript:void(0);" title="${arr[i].title}">
                    <div class="imgBox">
                        <img src="${arr[i].url}">
                        <div class="info">
                            <span class="author">${arr[i].author}</span>
                            <span class="like"><svg width="11px" height="12px" viewBox="0 0 11 12" version="1.1" rel="nofollow" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" class="icon"><desc>Created with Sketch.</desc> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g id="tag" stroke="#ffffff" transform="translate(-503.000000, -559.000000)"><g id="Group-Copy-5" transform="translate(504.000000, 560.000000)"><path id="Stroke-1" d="M5.95913517,2.75540789 C5.8983025,2.93455129 6.03764219,3.11990058 6.22589463,3.11990058 L7.92468796,3.11948686 C8.78703212,3.11948686 9.36781967,3.82944084 9.21573801,4.69743819 L8.63495045,8.01345284 C8.48286878,8.88103647 7.65340715,9.59099045 6.79106299,9.59099045 L1.11800577,9.59099045 C0.503102597,9.59099045 0,9.08458971 0,8.46565547 L0,4.24482184 C0,3.6258876 0.503102597,3.11948686 1.11800577,3.11948686 L2.59443104,3.11948686 C2.7555554,3.11948686 2.91010325,3.06487501 3.037112,2.9647533 C3.33469883,2.7301706 3.7983424,2.19522276 3.80204168,1.13815258 C3.80450787,0.534939937 4.26650731,0.0343313614 4.86496923,0.00288817814 L4.89168628,0.00164699985 C5.54933673,-0.0326922661 6.09847486,0.474122201 6.13464563,1.13029179 C6.16711712,1.71695539 6.09765279,2.34912887 5.95913517,2.75540789 L5.95913517,2.75540789 Z"></path> <path id="Stroke-3" d="M2,3.5 L2,8.5"></path></g></g></g></svg>
                            ${arr[i].like}</span>
                        </div>
                    </div>
                    <p>${arr[i].title}</p>
                </a>
            </div>`;
    }
    return sortStr
}

function showSort(arr,tab){
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        if(arr[i].tab == tab){
            newArr.push(arr[i]);
        }
    }
    $(".sortBox .page").eq(0).html(showSortStr(pagination(6, 1, newArr)));
    $(".sortBox .page").eq(1).html(showSortStr(pagination(6, 2, newArr)));
    $(".sortBox .page").eq(2).html(showSortStr(pagination(6, 3, newArr)));
    $(".sortBox .page").eq(3).html(showSortStr(pagination(6, 4, newArr)));
}

$(".sort .next").click(function(){
    if(flag){
        flag = false;
        sortIndex++;
        $(".sort .sortBox").css("transform","translateX( " + -maxWidth * sortIndex + "px )");
        if(sortIndex == 3){
            $(this).removeClass("btn");
        }
        if(sortIndex != 0){
            $(".sort .prve").addClass("btn");
        }
    }
});

$(".sort .prve").click(function(){
    if(flag){
        flag = false;
        sortIndex--;
        $(".sort .sortBox").css("transform","translateX( " + -maxWidth * sortIndex + "px )");
        if(sortIndex == 0){
            $(this).removeClass("btn");
        }
        if(sortIndex != 3){
            $(".sort .next").addClass("btn");
        }
    }
});

$(".sort .sortBox").on("transitionend", function () {
    flag = true;
});

$(".sort .sortList").on("click","li", function(){
    $(this).addClass("active").siblings("li").removeClass("active");
    // showSort(sort,$(this).html());
    // 正确语句↑↑↑ 
    //测试用↓↓↓
    if($(this).html() != "校园"){
        showSort(sort,"恋爱");
    } else{
        showSort(sort,$(this).html());
    }
    //测试用↑↑↑
    $(".sort").css("background", "url(./images/sortBg_0"+($(this).index() + 1)+".jpg) no-repeat 0 0/cover");
    $(".sort .sortBox").css("transform","translateX( 0px )");
    sortIndex = 0;
    $(".sort .prve").removeClass("btn");
    $(".sort .next").addClass("btn");
})

// 这部漫改作品超厉害！
function showHottest(arr){
    var hottestStr = "";
    for(var i = 0; i < arr.length; i++){
        hottestStr += `
            <div class="item">
                <a href="javascript:void(0);">
                    <div class="imgBox">
                        <img src="${arr[i].url}">
                        <div class="imgText">
                            <span class="author">${arr[i].author}</span>
                            <span class="like"><svg width="11px" height="12px" viewBox="0 0 11 12" version="1.1" rel="nofollow" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" class="icon"><desc>Created with Sketch.</desc> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g id="tag" stroke="#ffffff" transform="translate(-503.000000, -559.000000)"><g id="Group-Copy-5" transform="translate(504.000000, 560.000000)"><path id="Stroke-1" d="M5.95913517,2.75540789 C5.8983025,2.93455129 6.03764219,3.11990058 6.22589463,3.11990058 L7.92468796,3.11948686 C8.78703212,3.11948686 9.36781967,3.82944084 9.21573801,4.69743819 L8.63495045,8.01345284 C8.48286878,8.88103647 7.65340715,9.59099045 6.79106299,9.59099045 L1.11800577,9.59099045 C0.503102597,9.59099045 0,9.08458971 0,8.46565547 L0,4.24482184 C0,3.6258876 0.503102597,3.11948686 1.11800577,3.11948686 L2.59443104,3.11948686 C2.7555554,3.11948686 2.91010325,3.06487501 3.037112,2.9647533 C3.33469883,2.7301706 3.7983424,2.19522276 3.80204168,1.13815258 C3.80450787,0.534939937 4.26650731,0.0343313614 4.86496923,0.00288817814 L4.89168628,0.00164699985 C5.54933673,-0.0326922661 6.09847486,0.474122201 6.13464563,1.13029179 C6.16711712,1.71695539 6.09765279,2.34912887 5.95913517,2.75540789 L5.95913517,2.75540789 Z"></path> <path id="Stroke-3" d="M2,3.5 L2,8.5"></path></g></g></g></svg>
                            ${arr[i].like}</span>
                        </div>
                    </div>
                    <div class="info">
                        <span class="title">${arr[i].title}</span>
                        <span class="depict">${arr[i].depict}</span>
                    </div>
                </a>
            </div>`;
    }
    $(".hottest .content").html(hottestStr);
}

// 飙升榜 / 韩漫榜
function showRankStr(arr){
    var up = `<svg width="9px" height="12px" viewBox="0 0 9 12" version="1.1" rel="nofollow" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" class="changeIcon" data-v-5ee8f9d6=""><desc data-v-5ee8f9d6="">Created with Sketch.</desc> <g id="三大榜单排名上升" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" data-v-5ee8f9d6=""><g id="Group-25" stroke="#F56C6C" data-v-5ee8f9d6=""><g id="Group-11" data-v-5ee8f9d6=""><g transform="translate(1.000000, 1.000000)" data-v-5ee8f9d6=""><polyline id="Path-3" stroke-width="1.5" stroke-linejoin="round" points="0.00494025735 3.52274816 3.49923706 0 6.99494485 3.52274816" data-v-5ee8f9d6=""></polyline> <path id="Path-4" d="M3.5,1 L3.5,9.53185237" stroke-width="1.5" data-v-5ee8f9d6=""></path></g></g></g></g></svg>`;
    var down = `<svg width="9px" height="12px" viewBox="0 0 9 12" version="1.1" rel="nofollow" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" class="changeIcon" style="" data-v-5ad51c94=""><desc data-v-5ad51c94="">Created with Sketch.</desc> <g id="三大榜单排名下降" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" data-v-5ad51c94=""><g id="Group" data-v-5ad51c94=""><g id="Group-25" transform="translate(1.000000, 1.000000)" stroke="#1EAB50" stroke-linecap="round" stroke-width="1.5" data-v-5ad51c94=""><g id="Group-11-Copy-3" transform="translate(3.500000, 5.000000) scale(1, -1) translate(-3.500000, -5.000000) " data-v-5ad51c94=""><g id="Group-11" data-v-5ad51c94=""><polyline id="Path-3" stroke-linejoin="round" points="0.00494025735 3.52274816 3.49923706 0 6.99494485 3.52274816" data-v-5ad51c94=""></polyline> <path id="Path-4" d="M3.5,1 L3.5,9.53185237" data-v-5ad51c94=""></path></g></g></g> <rect id="Rectangle" x="0" y="0" width="9" height="12" data-v-5ad51c94=""></rect></g></g></svg>`;
    var noChange = `<svg width="8px" height="2px" viewBox="0 0 8 2" version="1.1" rel="nofollow" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" class="changeIcon nochange" style="" data-v-49ed1936=""><desc data-v-49ed1936="">Created with Sketch.</desc> <g id="三大榜单排名无变化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" data-v-49ed1936=""><rect id="Rectangle" fill="#B8B8B8" x="0" y="0" width="8" height="2" rx="1" data-v-49ed1936=""></rect></g></svg>`;
    var status = "";
    var rankStr = "";
    for(var i = 0; i < arr.length; i++){
        if(arr[i].rank[1] == "up"){
            status = up;
        } else if(arr[i].rank[1] == "down"){
            status = down;
        } else if(arr[i].rank[1] == "noChange"){
            status = noChange;
        }
        rankStr += `
            <div class="item">
                <a href="javascript:void(0);">
                    <div class="imgBox">
                        <img src="${arr[i].url}">
                    </div>
                    <div class="info">
                        <div class="rank">
                            <span class="top">TOP.${arr[i].top[1]}</span>
                            <span class="status">${status}
                                ${arr[i].rank[0]}</span>
                        </div>
                        <p class="title">${arr[i].title}</p>
                        <p class="author">${arr[i].author}</p>
                        <p class="depict">${arr[i].depict}</p>
                    </div>
                </a>
            </div>`;
    }
    return rankStr
}

function showRank(arr,list){
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        if(arr[i].top[0] == list){
            newArr.push(arr[i]);
        }
    }
    $(".ranking .content").html(showRankStr(pagination(9, 1, newArr)));
}

$(".ranking .rankList").on("click","li", function(){
    $(this).addClass("active").siblings("li").removeClass("active");
    $(".ranking").css("background", "url(./images/rankingbg_0"+($(this).index() + 1)+".jpg) no-repeat 0 0/cover");
    showRank(ranking,$(this).html());
})

// 眉头一皱，发现事情并不简单！
function showRecommend(arr){
    var recommendStr = "";
    for(var i = 0; i < arr.length; i++){
        recommendStr += `
            <div class="item">
                <a href="javascript:void(0);" title="${arr[i].title}">
                    <div class="imgBox">
                        <img src="${arr[i].url}">
                        <div class="tab">
                            <span>${arr[i].tab[0]}</span>
                            <span>${arr[i].tab[1]}</span>
                        </div>
                    </div>
                    <p>${arr[i].title}</p>
                </a>
                <div class="info">
                    <span class="author">${arr[i].author}</span>
                    <span class="like"><svg width="11px" height="12px" viewBox="0 0 11 12" version="1.1" rel="nofollow" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" class="icon"><desc>Created with Sketch.</desc> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g id="tag" stroke="#999999" transform="translate(-503.000000, -559.000000)"><g id="Group-Copy-5" transform="translate(504.000000, 560.000000)"><path id="Stroke-1" d="M5.95913517,2.75540789 C5.8983025,2.93455129 6.03764219,3.11990058 6.22589463,3.11990058 L7.92468796,3.11948686 C8.78703212,3.11948686 9.36781967,3.82944084 9.21573801,4.69743819 L8.63495045,8.01345284 C8.48286878,8.88103647 7.65340715,9.59099045 6.79106299,9.59099045 L1.11800577,9.59099045 C0.503102597,9.59099045 0,9.08458971 0,8.46565547 L0,4.24482184 C0,3.6258876 0.503102597,3.11948686 1.11800577,3.11948686 L2.59443104,3.11948686 C2.7555554,3.11948686 2.91010325,3.06487501 3.037112,2.9647533 C3.33469883,2.7301706 3.7983424,2.19522276 3.80204168,1.13815258 C3.80450787,0.534939937 4.26650731,0.0343313614 4.86496923,0.00288817814 L4.89168628,0.00164699985 C5.54933673,-0.0326922661 6.09847486,0.474122201 6.13464563,1.13029179 C6.16711712,1.71695539 6.09765279,2.34912887 5.95913517,2.75540789 L5.95913517,2.75540789 Z"></path> <path id="Stroke-3" d="M2,3.5 L2,8.5"></path></g></g></g></svg>
                    ${arr[i].like}</span>
                </div>
            </div>`;
    }
    $(".recommend .content").html(recommendStr);
}

// 初始化
init();
